<template>
  <el-form :model="props.issuesData">
    <!-- 状态 -->
    <el-form-item>
      <el-select
        v-model="props.issuesData.is_status"
        filterable
        placeholder="状态"
        size="large"
        style="width: 100%"
        popper-class="el-issues-desc"
      >
        <el-option
          v-for="item in optStatus"
          :key="item.label"
          :label="item.label"
          :value="item.label"
        >
          <i
            class="iconfont"
            style="font-size: 16px; padding-right: 5px; float: left"
            :class="item.icon"
            :style="{ color: item.iconColor ? item.iconColor : '' }"
          ></i>
          <span>{{ item.label }}</span>
        </el-option>
      </el-select>
    </el-form-item>

    <!-- 负责人 -->
    <h4>负责人</h4>
    <el-form-item>
      <el-select
        v-model="props.issuesData.charge_id"
        filterable
        collapse-tags
        collapse-tags-tooltip
        multiple
        placeholder="选择负责人"
        size="large"
        style="width: 100%"
        popper-class="el-person"
      >
        <el-option
          v-for="item in userlistData"
          :key="item.id"
          :label="item.userName"
          :value="item.id"
        >
          <div class="person-list">
            <el-avatar
              size="small"
              :src="
                item.avatar
                  ? item.avatar
                  : 'https://openim-1309784708.cos.ap-shanghai.myqcloud.com/4ce4fccbca32722fdd9d41acb48ef409.jpg'
              "
            />
            <span class="name">{{ item?.userName }}</span>
          </div>
        </el-option>
      </el-select>
    </el-form-item>

    <!-- 问题标签 -->
    <h4>问题标签</h4>
    <el-form-item>
      <el-select
        v-model="props.issuesData.issues_tags"
        collapse-tags
        collapse-tags-tooltip
        multiple
        filterable
        allow-create
        default-first-option
        :reserve-keyword="false"
        placeholder="选择问题标签"
        size="large"
        style="width: 100%"
        popper-class="el-issues-desc"
      >
        <el-option
          v-for="item in tagsListData"
          :key="item.id"
          :label="item.label"
          :value="item.label"
        >
          <i class="iconfont icon-biaoqian" style="font-size: 16px; float: right"></i>
          <span style="float: left" :style="{ color: item.tags_color }">{{ item.label }}</span>
        </el-option>
        <div class="add-tags" @click.stop="addTags">
          <i class="iconfont iconbianji2" style="font-size: 16px"></i>
          <span>增加标签 </span>
        </div>
      </el-select>
    </el-form-item>

    <!-- 开始日期---截止日期 -->
    <h4>开始日期---截止日期</h4>
    <el-form-item>
      <div class="block">
        <el-date-picker
          v-model="props.issuesData.time_range"
          type="daterange"
          range-separator="-"
          start-placeholder="未设置"
          end-placeholder="未设置"
          size="large"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        />
      </div>
    </el-form-item>

    <!-- 置顶选项 -->
    <h4>置顶选项</h4>
    <el-form-item>
      <el-select
        v-model="issuesData.top_id"
        filterable
        placeholder="请选择"
        size="large"
        style="width: 100%"
      >
        <el-option
          v-for="item in optTop"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <!-- 优先级 -->
    <h4>优先级</h4>
    <el-form-item>
      <el-select
        v-model="props.issuesData.priority"
        filterable
        placeholder="请选择"
        size="large"
        style="width: 100%"
        popper-class="el-priority"
      >
        <el-option
          v-for="item in optPriority"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <div class="priority-box">
            <span>{{ item.label }}</span>
            <div class="icon-box" :style="{ background: item.iconColor }"></div>
          </div>
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, PropType, computed, defineExpose, Ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// import { ItagsData, Issues } from '@/views/issues/config/issues'
// import { getTagsList } from '@/apis/issues/issues-tags'
import { userStore } from '@/store/user'
import { storeToRefs } from 'pinia'
import { IProblems, ItagsData } from '../../config/problems'
import { getTagList } from '@/apis/system/problems'
import { getUserList } from '@/apis/system/userInfo'
import { Itype } from '@/type'

const userData = userStore()
userData.getUserData()
const { userlistData } = storeToRefs(userData)

/**
 * @desc:获取用户
 */
let pager = ref({
  page: 1,
  size: 10,
  total: 0
})
const loading = ref(false)
let total: Itype = ref(0)
let dataList: Itype = ref()
const getDatas = () => {
  loading.value = true
  getUserList()
    .then((res) => {
      if (res) {
        dataList.value = res
        dataList.value.forEach((element: Itype) => {
          element.created_at = new Date(
            +new Date(new Date(element.created_at).toJSON()) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
        })
      }
      loading.value = false
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}

getDatas()

const props = defineProps({
  issuesData: {
    type: Object as PropType<IProblems>,
    default: () => {}
  }
})

/**
 * @desc: 增加标签
 */
const emit = defineEmits(['send-tagsDialog'])
const addTags = () => {
  emit('send-tagsDialog')
}

/**
 * 获取tags数据
 */
// const tagsListData = ref<ItagsData[]>()
const tagsListData = ref()
const getData = () => {
  getTagList()
    .then((res) => {
      if (!res) return
      tagsListData.value = res
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}

getData()

defineExpose({
  getData
})

/**
 * 问题状态
 */
const optStatus = [
  {
    value: '待办的',
    label: '待办的',
    icon: 'icon-daiban3'
  },
  {
    value: '进行中',
    label: '进行中',
    icon: 'icon-jinhangzhong'
  },
  {
    value: '已完成',
    label: '已完成',
    icon: 'icon-yiwancheng',
    iconColor: '#4baf50'
  },
  {
    value: '已拒绝',
    label: '已拒绝',
    icon: 'icon-yijujue',
    iconColor: '#ec0019'
  }
]

// 置顶项
const optTop = [
  {
    value: 0,
    label: '不置顶'
  },
  {
    value: 1,
    label: '置顶'
  }
]

// 优先级
const optPriority = [
  {
    value: '不指定',
    label: '不指定',
    iconColor: '#B0B0B0'
  },
  {
    value: '严重',
    label: '严重（需要立即解决的）',
    iconColor: '#EF0016'
  },
  {
    value: '主要',
    label: '主要（最近需要解决的）',
    iconColor: '#FF8F00'
  },
  {
    value: '次要',
    label: '次要（需要解决的）',
    iconColor: '#008AFF'
  },
  {
    value: '不重要',
    label: '不重要（可以暂缓的）',
    iconColor: '#73E06F'
  }
]
</script>

<style lang="less" scoped>
@color: #fdf6ec;

h4 {
  padding-bottom: 20px;
}
.block {
  :deep(.el-range-editor.el-input__wrapper) {
    width: 92%;
  }
}
.el-issues-desc {
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: @color !important;
  }
  .add-tags {
    display: flex;
    text-align: center;
    height: 30px;
    line-height: 30px;
    align-items: center;
    justify-content: center;
    transform: translateY(4px);
    cursor: pointer;
    &:hover {
      color: #fe7300;
    }
    span {
      padding-left: 5px;
    }
  }
}
.person-list {
  display: flex !important;
  align-items: center;
  .name {
    padding-left: 10px;
  }
}
.el-priority {
  position: relative;
  .icon-box {
    position: absolute;
    top: 10px;
    left: 20px;
    width: 15px;
    height: 15px;
    border-radius: 20px;
  }
  .priority-box {
    span {
      padding-left: 20px;
    }
  }
}
</style>
